/*公共css*/
.container {border: red 1px solid;width: 60%;margin-left: 20%;margin-top: 20px;position: relative;}
.right {text-align: right}
.left {text-align: left}

/* 覆盖h5的默认样式,不一定生效 有浏览器兼容问题 */
input[type="search"]::-webkit-search-cancel-button {-webkit-appearance: none;height: 15px;width: 15px;background-color: red;}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {-webkit-appearance: none;margin: 0;}

/*<!-- 邮箱特殊样式部分 -->*/
#demo_mail input{border: 1px solid #999;outline:0;width:140px;height:30px;line-height:30px;text-indent:36px;transition: all .3s;border-radius:5px;}
#demo_mail span.title{position:absolute;line-height:30px;height: 30px;left:2px;top:2px;transition:all .3s;}
#demo_mail input:focus,
#demo_mail input:hover{text-indent:2px;}
#demo_mail input:focus + span.title,
#demo_mail input:hover + span.title{transform:translateX(-120%)}
#demo_mail input:valid ~ label::after{content: "你输入正确！"}
#demo_mail input:invalid ~ label::after{content: "你邮箱错误！"}
#demo_mail input:valid{border:1px solid green;}
#demo_mail input:invalid{border:1px solid red;}

/* 美化表单部分 */
#three .oneList {margin: 10px 0 5px 12px;}
#three .oneList label {width: 80px;display: inline-block}
#three .oneList input,
#three .oneList select {height: 25px;line-height: 25px;width: 220px;border-radius: 3px;border: 1px solid #e2e2e2;}
#three .oneList input[type="submit"] {width: 150px;height: 30px;line-height: 30px;}
#three select:required,
#three input:required,
#three textarea:required {background: #fff url(../../webApp/demo/h5_from/image/star.jpg) no-repeat 100% center;}
#three select:required:valid,
#three input:required:valid,
#three textarea:required:valid {background: #fff url(../../webApp/demo/h5_from/image/right.png) no-repeat 99% center;box-shadow: 0 0 5px #5cd053;border-color: #28921f;}
#three select:focus:invalid,
#three input:focus:invalid,
#three textarea:focus:invalid {background: #fff url(../../webApp/demo/h5_from/image/error.png) no-repeat 99% center;box-shadow: 0 0 5px red;border-color: red;outline: red solid 1px;}

/* 表单验证默认样式修改 */
#four .oneLine{line-height: 1.5;margin:10px auto;}
#four .oneLine label{width:100px;text-indent: 15px;font-size:14px;font-family: "Microsoft Yahei";display: inline-block;}
#four .oneLine .four_input{width:60%;height:30px;border-radius: 6px;border:1px solid #e2e2e2;}
#four .oneLine input[type="submit"]{margin-left:20px;width:80px;height:30px;border:0;background-color:#5899d0;color:#fff;font-size:14px;border-radius: 6px;}
#four .error-message{color:red; font-size:12px;text-indent:108px;}

/* 美化表单demo2 纯css实现 */
#five{max-width:400px;margin:20px auto;}
#five input,
#five select,
#five textarea{width:240px;margin:10px 0;border:1px solid #999;padding:.5em 1em;}
#five label{color:#999;margin-left:10px;}
#five input:required,
#five textarea:required{border-right:3px solid #aa0088;}
#five input:optional,
#five select:optional{border-right:3px solid #999;}
#five input:required + #five label::after{content:"（必填）"}
#five input:optional + #five label::after{content:"（选填）"}
#five input:focus,
#five select:focus,
#five textarea:focus{outline:0;}
#five input:required:focus,
#five textarea:required:focus{box-shadow:0 0 3px 1px #aa0088;}
#five input:optional:focus,
#five select:optional:focus{box-shadow:0 0 3px 1px #999;}
#five input[type="submit"]{background-color:#cc00aa;border:2px solid #aa0088;padding:10px 0;color:#fff;}
#five input[type="submit"]:hover{background-color:#aa0088;}